<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>车享乐-用户中心</title>
	<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/css/main.css">
	<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="/static/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/static/js/slide.js"></script>
	<script type="text/javascript" src="../../static/layui/layui.js"></script>
	<link href="../../static/layui/css/layui.css" rel="stylesheet" rel="stylesheet">
	<script src="../../static/mylayer.js" type="text/javascript" charset="utf-8"></script>
	<style>
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}
	</style>
</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到鑫鑫车享乐租车系统!  祝您畅享旅途，鑫鑫相伴！</div>
			<div class="fr">
				<div class="user_link fl">
					<a href="javascript:;">
						欢迎您：<img class="avatar-img" src="/pic/${user.avatar}"/>
						${user.username}
					</a>
					<span>|</span>
					<a href="/page/user/info">用户中心</a>
					<span>|</span>
					<a href="/page/user/order">我的订单</a>
					<span>|</span>
					<a href="javascript:logout()">注销</a>
				</div>
			</div>
		</div>
	</div>

	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="/static/pic/xx-logo.png" width="180%"></a>
		<div class="search_con fr">
			<input type="text" id="searchInput" class="input_text fl" placeholder="搜索订单">
			<input type="button" id="searchButton" class="input_btn fr" value="搜索">
		</div>		
	</div>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="/page/user/info">· 个人信息</a></li>
				<li><a href="/page/user/order" class="active">· 全部订单</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">

			<a href="/page/user/order"><h3 class="common_title2">全部订单</h3></a>
			<div id="OrderList"></div>
			<div id="demo-laypage-all"></div>
		</div>
	</div>



	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	<script>
		var orderQuery = {
			page: 1,
			limit: 10,
			model: null,
			userId: ${user.id}
		};
		// 绑定搜索按钮点击事件
		$('#searchButton').click(function() {
			updateOrderQuery(); // 更新 orderQuery 对象
			orderQuery.page=1;
			sendQuery(); // 发送查询请求
		});

		// 页面加载完成后自动执行一次查询
		$(document).ready(function() {
			sendQuery();
		});

		function updateOrderQuery() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			orderQuery.model = searchText || null; // 更新 orderQuery 中的 model 字段
		}
		function sendQuery() {
			$.post(
					'/order?method=selectByPage',
					orderQuery, // 将 orderQuery 对象作为数据发送
					function (result) {
						if (result.code == 0) {
							renderOrderList(result);
							page(result.count);
							console.log(result.data);
							console.log(result.count);
							// 更新分页组件的总页数
						}
					},
					'json'
			);
		}


		function renderOrderList(result) {
			console.log(orderQuery)
			if (result.code == 0) {
				var html = ''
				$('#OrderList').empty();
				$(result.data).each(function () {
					if (this.orderStatus == 0) {
						html += '<ul class="order_list_th w978 clearfix">'
						html += '	<li class="col01">'+this.orderTime+'</li>'
						html += '	<li class="col02">订单号：'+this.orderNumber+'</li>'
						html += '	<li class="col02 stress">已完成</li>'
						html += '</ul>'
						html += '<table class="order_list_table w980">'
						html += '	<tbody>'
						html += '	<tr>'
						html += '		<td width="25%"><img src="/pic/'+this.image+'" width="180px" height="180px"></td>'
						html += '		<td width="15%">'+this.model+'</td>'
						html += '		<td width="15%">'+this.licensePlate+'</td>'
						html += '		<td width="15%">'+this.totalCost+'元</td>'
						html += '		<td width="15%">已还车</td>'
						html += '		<td width="15%"><a href="/page/order?id='+this.id+'&orderStatus='+this.orderStatus+'" class="oper_btn">查看订单</a></td>'
						html += '	</tr>'
						html += '	</tbody>'
						html += '</table>'
					} else {
						html += '<ul class="order_list_th w978 clearfix">'
						html += '	<li class="col01">'+this.orderTime+'</li>'
						html += '	<li class="col02">订单号：'+this.orderNumber+'</li>'
						html += '	<li class="col02 stress">未还车</li>'
						html += '</ul>'

						html += '<table class="order_list_table w980">'
						html += '	<tbody>'
						html += '	<tr>'
						html += '		<td width="25%"><img src="/pic/'+this.image+'" width="180px" height="180px"></td>'
						html += '		<td width="15%">'+this.model+'</td>'
						html += '		<td width="15%">'+this.licensePlate+'</td>'
						html += '		<td width="15%">'+this.totalCost+'元</td>'
						html += '		<td width="10%">待还车</td>'
						html += '		<td width="10%"><a href="/page/car/return?id='+this.id+'" class="oper_btn">去还车</a></td>'
						html += '		<td width="10%"><a href="/page/order?id='+this.id+'&orderStatus='+this.orderStatus+'" class="oper_btn">查看订单</a></td>'
						html += '	</tr>'
						html += '	</tbody>'
						html += '</table>'
					}
				}),
				$('#OrderList').append(html);
			}
		}
		function page(count) {
			layui.use(function(){
				var laypage = layui.laypage;
				// 完整显示
				console.log(count)
				// 初始化分页
				laypage.render({
					elem: 'demo-laypage-all', // 元素 id
					count: count, // 假设总数据量
					curr: orderQuery.page, // 设置当前页码
					limit:orderQuery.limit,
					layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
					jump: function(obj, first){
						if (!first) { // 首次不执行，避免重复触发
							orderQuery.page = obj.curr; // 根据当前页码获取数据
							orderQuery.limit = obj.limit;
							sendQuery();
						}
					}
				});
			});
		}
		<%--$.post(--%>
		<%--		'/order?method=selectOrder',--%>
		<%--		{'userId':${user.id}},--%>
		<%--		function (result) {--%>
		<%--			if (result.code == 0) {--%>
		<%--				var html = ''--%>
		<%--				$('#OrderList').empty();--%>
		<%--				$(result.data).each(function () {--%>
		<%--					if (this.orderStatus == 0) {--%>
		<%--						html += '<ul class="order_list_th w978 clearfix">'--%>
		<%--						html += '	<li class="col01">'+this.orderTime+'</li>'--%>
		<%--						html += '	<li class="col02">订单号：'+this.orderNumber+'</li>'--%>
		<%--						html += '	<li class="col02 stress">已完成</li>'--%>
		<%--						html += '</ul>'--%>
		<%--						html += '<table class="order_list_table w980">'--%>
		<%--						html += '	<tbody>'--%>
		<%--						html += '	<tr>'--%>
		<%--						html += '		<td width="25%"><img src="/pic/'+this.image+'" width="180px" height="180px"></td>'--%>
		<%--						html += '		<td width="15%">'+this.model+'</td>'--%>
		<%--						html += '		<td width="15%">'+this.licensePlate+'</td>'--%>
		<%--						html += '		<td width="15%">'+this.totalCost+'元</td>'--%>
		<%--						html += '		<td width="15%">已还车</td>'--%>
		<%--						html += '		<td width="15%"><a href="/page/order?id='+this.id+'&orderStatus='+this.orderStatus+'" class="oper_btn">查看订单</a></td>'--%>
		<%--						html += '	</tr>'--%>
		<%--						html += '	</tbody>'--%>
		<%--						html += '</table>'--%>
		<%--					} else {--%>
		<%--						html += '<ul class="order_list_th w978 clearfix">'--%>
		<%--						html += '	<li class="col01">'+this.orderTime+'</li>'--%>
		<%--						html += '	<li class="col02">订单号：'+this.orderNumber+'</li>'--%>
		<%--						html += '	<li class="col02 stress">未还车</li>'--%>
		<%--						html += '</ul>'--%>

		<%--						html += '<table class="order_list_table w980">'--%>
		<%--						html += '	<tbody>'--%>
		<%--						html += '	<tr>'--%>
		<%--						html += '		<td width="25%"><img src="/pic/'+this.image+'" width="180px" height="180px"></td>'--%>
		<%--						html += '		<td width="15%">'+this.model+'</td>'--%>
		<%--						html += '		<td width="15%">'+this.licensePlate+'</td>'--%>
		<%--						html += '		<td width="15%">'+this.totalCost+'元</td>'--%>
		<%--						html += '		<td width="10%">待还车</td>'--%>
		<%--						html += '		<td width="10%"><a href="/page/car/return?id='+this.id+'" class="oper_btn">去还车</a></td>'--%>
		<%--						html += '		<td width="10%"><a href="/page/order?id='+this.id+'&orderStatus='+this.orderStatus+'" class="oper_btn">查看订单</a></td>'--%>
		<%--						html += '	</tr>'--%>
		<%--						html += '	</tbody>'--%>
		<%--						html += '</table>'--%>
		<%--					}--%>
		<%--				}),--%>
		<%--				$('#OrderList').append(html);--%>
		<%--			}--%>
		<%--		},--%>
		<%--		'json'--%>
		<%--);--%>
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user?method=logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okUrl(result.msg, '/page/login');
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		}
	</script>
</body>
</html>